<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>機場快綫</title>
<head>
    <style>
        div.header {
            display: block;
            text-align: center;
            position: running(header);
        }

        div.footer {
            display: block;
            text-align: center;
            position: running(footer);
        }

        @page {
            @top-center {
                content: element(header)
            }
        }

        @page {
            @bottom-center {
                content: element(footer)
            }
        }

        .pageNext {
            page-break-after: always;
        }

        #pagenumber:before {
            content: counter(page);
        }

        #pagecount:before {
            content: counter(pages);
        }

        .row-1 {
            width: 100px;
            padding: 5px;
        }

        .row-2 {
            width: 66%;
            padding: 5px;
        }

        .row-qr-2 {
            width: 66%;
            padding: 12px;
        }
    </style>
</head>
<body style="font-family: SimSun">
<#list list as item>
    <div id="page-number-${item_index+1}" style="width: 100%">
        <table style="width: 680px;margin: 0px auto;border-collapse: collapse;">
            <tbody>
            <tr>
                <td colspan="3">
                    <div align="center">
                        <img id="log_img" style="width: 310px;height: 90px"
                             src="https://ctshk-cloud-dev.oss-cn-hongkong.aliyuncs.com/ctshk-logo.png"/>
                        <#--<img id="u53601_img" style="width: 550px;height: 160px"
                             src=""/>-->
                    </div>
                </td>
            </tr>
            <tr>
                <td class="row-1"></td>
                <td class="row-2" style="text-align: right;font-size: 15px;" colspan="2">
                    參考編號 Reference No：${item["ticketNumber"]!}
                </td>
            </tr>
            <tr>
                <td class="row-1"></td>
                <td class="row-2" style="text-align: right;font-size: 15px;" colspan="2">
                    同業代碼 Agent ID：A00036
                </td>
            </tr>
            <tr>
                <td class="row-1" style="font-size: 15px;border-bottom: 1px solid gray;">電子客票</td>
                <td class="row-2" style="text-align: right;font-size: 15px;border-bottom: 1px solid gray;" colspan="2">
                    交易號碼 Transaction No：${item["orderNumber"]!}
                </td>
            </tr>
            <tr>
                <td class="row-1" style="padding: 15px;" rowspan="4">
                    <img id="ticket_${item_index+1}_img" style="width: 220px;height: 220px"
                         src="${item["ticketQrCodeUrl"]!}"/>
                </td>
                <td class="row-qr-2" style="padding-top: 35px;">
                    <span>${item["ticketTypeNameCn"]!}<br/>
                        ${item["ticketTypeNameEn"]!}</span>
                </td>
            </tr>
            <tr>
                <td class="row-qr-2" colspan="2">
                    <span>有效期 Valid Until：${item["effectiveTime"]!}</span>
                </td>
            </tr>
            <tr>
                <td class="row-qr-2" colspan="2">
                    <span>票種 Type：${item["ticketTouristType"]!}</span>
                </td>
            </tr>
            <tr>
                <td class="row-qr-2" style="padding-bottom: 35px" colspan="2">
                    <span>車票編號：${item["ticketNumber"]!}</span>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <p style="font-weight: bold;">二維碼使用方法 (只適用於機場快綫單程票及機場快綫來回票)</p>
                    <p>列印或下載電郵「確認通知書」內的二維碼圖像。</p>
                    <p>您亦可於應用程式內之「已購買的車票」 打開二維碼圖像。</p>
                    <p>把二維碼圖像置於指定閘機之二維碼掃瞄器上即可過閘。</p>
                    <p style="font-weight: bold;">單程車票條款及細則</p>
                    <p style="font-family: SimSun;">${item.bookingInformation}</p>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <#if item_has_next>
        <div class="pageNext"></div>
    </#if>
</#list>
</body>
</html>